<template>
  <div>
    <Header></Header>
    <!--main开始-->
    <div class="mainBox w1200 bc mt20 clearfix">
      <userSideMenu :flag="'home'"></userSideMenu>
      <div class="mainRight fr w938">
        <!--热门活动-->
        <div class="bg100 ">
          <!--title-->
          <h1 class="h60 bb90 clearfix ">
            <a class="ml30 fl h60 f18 fm-yahei c60 lh60 curborder_grn_bottom hoverborder_grn_bottom" href="javascript:void (0);">热门活动</a>
            <!--<a class="fl h60 f18 fm-yahei c60 lh60  ml80 hoverborder_grn_bottom" href="#">附近活动</a>-->
          </h1>
          <!--list-->
          <ul class="activeBox">
            <li class="w430 mb30 pointer"  v-for="(item, index) in activeList" @click="gotoDetail(item['id'])">
              <img class="fl br2 w170 h130 mr20" :src="item['coverImgUrl']+'?x-oss-process=image/resize,m_fill,h_130,w_170'" width="170" height="130" alt=""/>
              <dl class="fl w240">
                <dt class="c0 lh30 f16">{{limitWord(item['activityName'],14,'...')}}</dt>
                <dd class="c60 f14 lh18 mt10">活动介绍：{{limitWord(item['activityDescripition'],30,'...')}}</dd>
                <dd class="c60 f12 fm lh150 mt35">{{limitWord(item['startTime'],10,'')}} 至 {{limitWord(item['endTime'],10,'')}}</dd>
              </dl>
            </li>
          </ul>
        </div><!--热门活动结束-->
        <!--热门圈子-->
        <div class="br2 bg100 mt20">
          <!--title-->
          <h1 class="h60 bb90 clearfix ">
            <a class="ml30 fl h60 f18 fm-yahei c60 lh60 curborder_grn_bottom hoverborder_grn_bottom" href="javascript:void(0);">热门圈子</a>
            <!--<a class="fl h60 f18 fm-yahei c60 lh60  ml80 hoverborder_grn_bottom" href="#">附近圈子</a>-->
          </h1>
          <!--list-->
          <ul class="w898 pl25 clearfix mt30 fm-yahei letter1 pointer">
            <li :class="(index%2)?'fr w400 mb30':'fl w400 mb30'" v-for="(item, index) in circleList">
              <img class="fl br2 w100 h100 mr20" :src="item['imgUrl']+'?x-oss-process=image/resize,m_fill,h_100,w_100'" width="100" height="100" alt=""/>
              <dl class="fl w280 mt10">
                <dt class="c0 lh30 f16 clearfix">{{item['groupName']}}<span class="fr c60 f12 mr10">{{item['userCount']}}人</span></dt>
                <dd class="c60 f14 lh18 mt10">圈子介绍：{{limitWord(item['introduce'],26,"...")}}</dd>
              </dl>
            </li>
          </ul>
        </div><!--热门圈子结束-->
        <!--热门好友动态-->
        <div class="br2 bg100 mt20">
          <!--title-->
          <h1 class="h60 bb90 clearfix ">
            <a class="ml30 fl h60 f18 fm-yahei c7 lh60 " href="javascript:void (0);">好友动态</a>
          </h1>
          <!--list-->
          <ul class="w898 pl25 fm-yahei letter1 pointer c7 f16 fm-yahei" ref="infoListBox">
            <li class="pt20 pb20 bb90 clearfix " v-for = "(item, index) in someThingList">
              <img class="fl br2 mr25" :src="item['fromImgUrl']+'?x-oss-process=image/resize,m_fill,h_80,w_80'" width="80" height="80" alt="" style="border-radius:40px;"/>
              <span class="fl lh80">{{item['fromNickName']}}</span>
              <span class="fl  lh80 ml120">{{limitWord(item['content'],26,"...")}}</span>
              <span class="fr lh80 c60 f12">{{item['addTime']}}</span>
            </li>
            <li class="tc c60 f12 lh60">
              <a class="c60 hoverfont_unl" href="javascript:void(0);" @click="getMoreFriendSomething">点击查看更多></a>
            </li>
          </ul>
        </div><!--热门圈子结束-->
      </div><!--mainRight结束-->
    </div>
    <!--main结束-->
    <footer></footer>
    <loading v-show = "loadState"></loading>
  </div>
</template>

<script>
  import Header from "../../components/header";
  import Footer from "../../components/footer";
  import userSideMenu from "../../components/usersidemenu";
  import Utils from "../../assets/Util";
  import loading from '../../components/loading';
  export default {
    name: "userIndex",
    components:{
      Header,
      Footer,
      userSideMenu,
      loading
    },
    data(){
      return {
        loadState:true,
        loadNum:0,
        activeList:[],
        circleList:[],
        someThingList:[],
        getFriendSomeData:{
          "pageIndex": 0,
          "pagesize": 10,
          "token": localStorage.getItem("token"),
          "userID": localStorage.getItem("uId"),
          "flag": 3
        }
      }
    },
    mounted(){
      if (!Utils.isLogin){
        this.$router.push({path:'/'})
      }
      this.getHomeList();
      this.getFriendsSomething();
    },
    methods:{
      // 请求热门活动与热门圈子
      getHomeList(){
        let props = {
          url:"/Common/GetHomeInfo",
          data:{
            cityID:0,
            selfCount:4
          },
          sCallBack:res => {
            this.loadNum += 1;
            if(this.loadNum === 2){
              this.loadState = false;
            }
            if(res.data.code === 1){
              this.activeList = res.data.data.listActivety;
              this.circleList = res.data.data.listGroup;
            }else{
              this.$message.error("接口请求出错");
            }
          },
          eCallBack:err => {
            this.$message.error("接口请求失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 请求好友动态
      getFriendsSomething(){
        let props = {
          url:"/Auditingpush/GetList",
          data:this.getFriendSomeData,
          sCallBack:res => {
            this.loadNum += 1;
            if(this.loadNum >= 2){
              this.loadState = false;
            }
            if(res.data.code === 1){
              if (this.getFriendSomeData.pageIndex === 0){
                this.$refs.infoListBox.innerHTML = " <li class=\"tc c60 f12 lh60 mt20\">\n" +
                  "                <a class=\"c60 hoverfont_unl\" href=\"javascript:void(0);\">暂无数据</a>\n" +
                  "              </li>"
                return false;
              }
              if(res.data.data.length < this.getFriendSomeData['pagesize']){
                this.$message.success("好友动态全部加载完毕");
                return false;
              }
              this.someThingList = this.someThingList.concat(res.data.data);
            }else{
              this.refreshToken(this.getFriendsSomething);
            }
          },
          eCallBack:err => {
            this.$message.error("好友动态请求失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 请求更多好友动态
      getMoreFriendSomething(){
        this.loadState = true;
        this.getFriendSomeData.pageIndex += 1;
        this.getFriendsSomething();
      },
      // 刷新token
      refreshToken(callBack){
        let refresh = {
          url:"/user/GetToken",
          data:{
            token:localStorage.getItem('token')
          },
          sCallBack:(res) => {
            localStorage.setItem("token", res.data.data)
            callBack && callBack();
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        Utils.myRequest(refresh);
      },
      // 限制字数
      limitWord(words, wordsLength, mark){
        return Utils.limitworld(words, wordsLength, mark);
      },
      gotoDetail(id){
        this.$router.push({
          path: "/activityDetail",
          query: {
            id: id
          }
        })
      }
    }
  }
</script>

<style scoped>
.activeBox{
  list-style-type: none;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
  width:898px;
  padding: 20px 20px;
  overflow: hidden;
  box-sizing: initial;
}
.activeBox li:nth-child(odd) {
  float:left;
}
.activeBox li:nth-child(even) {
  float:right;
}
</style>
